<template>
  <div class="container">
    <div ref="cardRef">
      <el-card shadow="never">
        <div class="edit-btn" v-if="counter.isShowActionBtn(info)" @click="proxy.$refs.updateClassRef.open(info)">
          <el-button type="primary">编辑班级信息</el-button>
        </div>

        <div class="title">{{info.className}}
          <span v-if="info.classId">{{info.classId}}</span>
        </div>

        <div v-loading="loading">
          <div class="row grids gridColumns5">
            <div class="col">开班时间：{{info.classOpeningTime}}</div>
            <div class="col">授课地点：{{info.classAddress}}</div>
            <div class="col">班级课时：{{info.classHours}}</div>
            <div class="col flex alignCenter">班级状态：
              <div v-if="info.status == 0" style="color: #E99D42">待开班</div>
              <div v-else-if="info.status == 1" style="color: #54C076">开班</div>
              <div v-else style="color: #909399">结业</div>
            </div>
            <div class="col">班级人数：{{classStudentsNum}} / {{info.classNum}}</div>
            <div class="col">班级课程：{{info.classCourses}}</div>
            <div class="col">授课讲师：{{info.teachingTeacher}}</div>
            <div class="col">排班课时：{{classCurrentHours}} / {{info.classHours}}</div>
            <div class="col">
              班级老师：{{info.classTeacher}}
            </div>
            <div class="col">
              排班天数：{{info.classDates&&info.classDates.length}}
            </div>
          </div>
        </div>

        <updateClass ref="updateClassRef" @fatherMethod="getInfo"></updateClass>
      </el-card>

      <el-card shadow="never" class="classCard">
        <el-tabs v-model="activeName" class="class-tabs">
          <el-tab-pane :label="item.name" :name="item.value.toString()" v-for="(item,index) in tabs" :key="index"></el-tab-pane>
        </el-tabs>

        <!-- 排课信息 -->
        <courseSchedulingInfoToC :info="info" v-if="activeName ==1"></courseSchedulingInfoToC>

        <!-- 班级学员 -->
        <classStudentsToC :info="info" v-else-if="activeName==2"></classStudentsToC>

        <!-- 班级相册 -->
        <classAlbum :info="info" v-else-if="activeName==3"></classAlbum>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
//班级相册
import classAlbum from "@/views/courseManage/components/classAlbum.vue";
import classStudentsToC from "@/views/courseManage/components/classStudentsToC.vue";
import courseSchedulingInfoToC from "@/views/courseManage/components/courseSchedulingInfoToC.vue";
import updateClass from "@/views/courseManage/components/updateClassToC.vue";
import { useRoute } from "vue-router";
const route = useRoute();
const { proxy } = getCurrentInstance();
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

let info = ref({});
let loading = ref(false);
let classStudentsNum = ref(0);
let classCurrentHours = ref(0);
let tabs = ref([
  { name: "排课信息", value: "1" },
  { name: "班级学员", value: "2" },
  { name: "班级相册", value: "3" },
]);
let activeName = ref("1");

let classId = computed(() => {
  return route.query.classId;
});

onMounted(() => {
  getInfo();
});

async function getInfo() {
  info.value = await proxy.$apis.classToC({
    type: "details",
    data: { _id: classId.value },
  });
  console.log("详情", info.value);
}
</script>


<style lang="scss">
.class-tabs {
  width: 100%;
  .el-tabs__nav-wrap::after {
    background-color: transparent !important;
  }
}
</style>
<style lang="scss" scoped>
.title {
  color: #c95b18;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 20px;
  span {
    color: #4196a2;
    font-size: 16px;
    margin-left: 15px;
  }
}
.row {
  font-size: 14px;
  justify-content: space-between;
  //font-weight: bold;
  margin-bottom: 10px;
  .col {
    text-align: left;
    margin-bottom: 10px;
  }
}
.el-card {
  margin-bottom: 10px;
  position: relative;
  .edit-btn {
    position: absolute;
    top: 15px;
    right: 20px;
  }
}
::v-deep .classCard {
  .el-card__body {
    padding: 15px 20px 0px 20px !important;
  }
}
</style>